<template>
    <el-form :inline="true" :model="adde"  :rules="rules"
             ref="recordForm"
             class="demo-ruleForm">

        <div align="center">
            <el-form-item label="">

                <h3>基本信息</h3><br>
                <tr>
                    <td width="50%"> <el-form-item label="* 姓名："  prop="name"><el-input v-model="adde.contactName" /></el-form-item></td>
                    <td width="50%"><el-form-item label="* 单位名称："  prop="uname"><el-input v-model="adde.unitname"/> </el-form-item></td>
                </tr>
                <tr>
                    <td><el-form-item label="* 手机：" prop="phone"><el-input maxlength="11"  v-model.number="adde.contactPhone" /> </el-form-item></td>
                    <td></td>
                </tr>
                <tr height="1">
                    <td colspan="100%" ><h3>详细信息：</h3><br><hr></td>
                </tr>
                <tr>
                    <td><el-form-item label="邮箱："><el-input type="email" v-model="adde.contactEmail" /></el-form-item></td>
                    <td><el-form-item label="部门："><el-input v-model="adde.contactDept" /> </el-form-item></td>
                </tr>
                <tr>
                    <td><el-form-item label="职务："><el-input v-model="adde.contactPost" /></el-form-item></td>
                    <td><el-form-item label="电话："><el-input v-model="adde.contactTel" /></el-form-item></td>
                </tr>
                <tr>
                    <td><el-form-item label="地址："><el-input type="textarea" label-width="80" v-model="adde.contactAddress"/></el-form-item></td>
                    <td><el-form-item label="备注："><el-input type="textarea" label-width="80" v-model="adde.remark" /></el-form-item></td>
                </tr>
                <tr>
                    <td colspan="2"><el-button type="primary" @click="AddContacts('recordForm')" :disabled="disabled">添加</el-button>
                        <el-button @click="coles">取消</el-button></td>
                </tr>
            </el-form-item>
        </div>
    </el-form>
</template>

<script>

    export default {
        name: "AdmContactsAdd",
        props:["dialogVisible"],
        data(){
            var name = (rule, value, callback) => {
                value=this.adde.contactName;
                if (!value) {
                    callback(new Error('请输入姓名'));
                } else {
                    callback();
                    this.disabled=false;
                }
            };
            var uname = (rule, value, callback) => {
                value=this.adde.unitname;
                if (!value) {
                    this.disabled = true;
                    callback(new Error('请输入单位名称'));
                } else {
                    callback();
                    this.disabled=false;
                }
            };
            var phone = (rule, value, callback) => {
                value=this.adde.contactPhone;
                if (!value) {
                    this.disabled = true;
                    return callback(new Error('手机号不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                        this.disabled = true;
                    } else {
                        this.disabled = false;
                            callback();
                    }
                }, 1000);
            };

            return{
                adde:{},
                disabled:true,
                dialogVisib: JSON.parse(JSON.stringify(this.dialogVisible)),
                rules: {
                    name: [{ validator: name, trigger: 'blur' }],
                    uname: [{ validator: uname, trigger: 'blur' }],
                    phone: [{ validator: phone, trigger: 'blur' }]
                }
            };
        },
        methods : {
            AddContacts(formName){
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
                         this.$emit('AddContacts',this.adde);
                         this.adde={};
                     } else {
                         console.log('error submit!!');
                         return false;
                     }
                 });

            },
            coles(){
                this.$emit('coles',this.dialogVisib=false);
            }
        }
    }

</script>

<style scoped>

</style>